<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>中钢集团洛阳耐火材料研究院有限公司</title>
  <link rel="stylesheet" href="/profile/css/common.css" />
  <link rel="stylesheet" href="/profile/css/swiper.min.css" />
  <link rel="stylesheet" href="/profile/css/home.css" />
  <link rel="stylesheet" href="/profile/css/aos.css" />
  <script src="/profile/js/jquery.min.js"></script>
  <script src="/profile/js/echarts.min.js"></script>
  <script src="/profile/js/jquery.numscroll.js"></script>
  <script src="/profile/js/fontSize.js"></script>
  <script src="/profile/js/common.js"></script>
  <script src="/profile/js/swiper.min.js"></script>
  <script src="/profile/js/aos.js"></script>
</head>

<body>
  <header>
<html lang="en">
<head>

<!--  <script th:src="@{/profile/js/jquery.min.js}"></script>-->
<!--  <script th:src="@{/profile/js/fontSize.js}"></script>-->
</head>

<body>
  <div class="headerWrap">
    <div class="headerC ">
      <div class="logo" onclick="toIndex()">
        <img src="/zgln/images/logo.png" alt=""/>
        <img src="/zgln/images/logo2.png" alt=""/>
      </div>
      <ul class="nav">

        <li>
          <a href="/website/aboutus/leaderSpeech?banner=2&amp;navbar=57">
            关于我们
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/aboutus/leaderSpeech?banner=2&amp;navbar=57">领导致辞</a>
            </li>
            <li>
              <a href="/website/aboutus/companyProfile?banner=2&amp;navbar=57">公司简介</a>
            </li>
            <li>
              <a href="/website/aboutus/corporateCulture?banner=2&amp;navbar=57">企业文化</a>
            </li>
            <li>
              <a href="/website/aboutus/contactUs?banner=2&amp;navbar=57">联系我们</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/info/basic?banner=9&amp;navbar=115">
            信息公开
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/info/basic?banner=9&amp;navbar=115">企业基本信息</a>
            </li>
            <li>
              <a href="/website/info/personnelChange?banner=9&amp;navbar=115">重要人事变动</a>
            </li>
            <li>
              <a href="/website/info/issues?banner=9&amp;navbar=115">企业重大事项</a>
            </li>
            <li>
              <a href="/website/info/responsibility?banner=9&amp;navbar=115">履行社会责任</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/news/news?banner=6&amp;navbar=58">
            新闻中心
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/news/news?banner=6&amp;navbar=58">企业要闻</a>
            </li>
            <li>
              <a href="/website/news/video?banner=6&amp;navbar=58">企业视频</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/partyBuild/activity?banner=4&amp;navbar=61">
            党建文化
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/partyBuild/activity?banner=4&amp;navbar=61">党建活动</a>
            </li>
            <li>
              <a href="/website/partyBuild/discipline?banner=4&amp;navbar=61">党规党纪</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/technological/team?navbar=119&amp;banner=10">
            科技创新
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/technological/team?navbar=119&amp;banner=10">创新团队</a>
            </li>
            <li>
              <a href="/website/technological/platform?navbar=119&amp;banner=10">创新平台</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=66">
            产品与服务
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=66">钢铁行业用耐火材料</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=67">有色行业用耐火材料</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=68">化工行业用耐火材料</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=69">建材行业用耐火材料</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=70">其他行业用耐火材料</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=94">高温检测仪器</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=119">齿科设备</a>
            </li>
            <li>
              <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=72">工程设计及施工总承包</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/national/introduce?banner=14&amp;navbar=146">
            国检中心
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/national/introduce?banner=14&amp;navbar=146">中心介绍</a>
            </li>
            <li>
              <a href="/website/national/process?banner=14&amp;navbar=146">业务流程及联系方式</a>
            </li>
            <li>
              <a href="/website/national/detect?banner=14&amp;navbar=146">检测技术</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/laboratory/introduce?banner=13&amp;navbar=145">
            先进耐火材料全国重点实验室
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/laboratory/introduce?banner=13&amp;navbar=145">重点实验室概况</a>
            </li>
            <li>
              <a href="/website/laboratory/dynamic?banner=13&amp;navbar=145">重点实验室动态</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/purchase/notice?banner=8&amp;navbar=141">
            招标采购
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/purchase/notice?banner=8&amp;navbar=141">招标公告</a>
            </li>
            <li>
              <a href="/website/purchase/instruction?banner=8&amp;navbar=141">招标须知</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/human/recruit?banner=7&amp;navbar=62">
            人力资源
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/human/recruit?banner=7&amp;navbar=62">招聘信息</a>
            </li>
            <li>
              <a href="/website/human/benefit?banner=7&amp;navbar=62">薪酬福利</a>
            </li>
            <li>
              <a href="/website/human/study?banner=7&amp;navbar=62">学习发展</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/website/investor/notice?banner=5&amp;navbar=107">
            投资者关系
          </a>
          <ul class="nav_list shadow_box">
            <li>
              <a href="/website/investor/notice?banner=5&amp;navbar=107">公司公告</a>
            </li>
            <li>
              <a href="/website/investor/stock?banner=5&amp;navbar=107">股票信息</a>
            </li>
            <li>
              <a href="/website/investor/hotline?banner=5&amp;navbar=107">投资者热线</a>
            </li>
            <li>
              <a href="/website/investor/protect?banner=5&amp;navbar=107">投资者保护</a>
            </li>
          </ul>
        </li>
      </ul>

      <div class="headerTop">
        <div class="headerSearch">
          <form action="/website/index/search" id="searchForm">
            <input type="text" id="searchInput" name="keyword" placeholder="请输入搜索内容" />
            <button type="button" id="searchButton">
              <img src="/zgln/images/search-icon.png" alt="" />
            </button>
          </form>
        </div>
        <script>
          document.addEventListener("DOMContentLoaded", function () {
          // 获取按钮和输入框元素
          var searchButton = document.getElementById("searchButton");
          var searchInput = document.getElementById("searchInput");
          var searchForm = document.getElementById("searchForm");

          // 绑定点击事件
          searchButton.addEventListener("click", function () {
            var keyword = searchInput.value.trim(); // 获取输入框的值并去除前后空格

            if (keyword !== "") {
              // 构建新的查询URL
              var actionUrl = searchForm.getAttribute("action");
              var newActionUrl = actionUrl + "?banner=12&keyword=" + encodeURIComponent(keyword);

              // 发送GET请求或跳转到新URL
              window.location.href = newActionUrl;
            } else {
              alert("请输入搜索内容！");
            }
          });
        });
        </script>

        <div class="headerTopLine"></div>
        <div class="language">
          <a href="https://en.lyrg.com.cn">
            <img src="/zgln/images/en.png" alt="" />
            <span>EN</span>
          </a>
        </div>
      </div>
    </div>
  </div>


  <script>
    // $('.nav').children('li').each(function(index){
    //   $(this).mouseenter(function(){
    //     $(this).children('.nav_list').slideDown();
    //   })
    //   $(this).mouseleave(function(){
    //     $(this).children('.nav_list').slideUp();
    //   })
    // })

    $('.headerSearch').mouseenter(function () {
      $(this).addClass('active')
    })

    $('.headerSearch').mouseleave(function () {
      $(this).removeClass('active')
    })

    $(window).scroll(function () {
      if ($(window).scrollTop() > 0) {
        $('.headerWrap').addClass('scroll');
      } else {
        $('.headerWrap').removeClass('scroll');
      }
    })

    $('.headerWrap').mouseenter(function () {
      $('.headerWrap').addClass('scroll');
    })
    $('.headerWrap').mouseleave(function () {
      if ($(window).scrollTop() <= 0) {
        $('.headerWrap').removeClass('scroll');
      }

    })

    function toIndex() {
      window.location.href = "/";
    }

  </script>
</body>

</html>
</header>

  <div class="bannerSwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="/profile/upload/2025/11/10/a8008f29c6ec5dcfe897c883866b7fca_8A001_20251107143149A004_20251110160516A001.jpg" alt="" />
        <p class="bannerT1" style="left: 5.18rem; top: 3.1rem">
          诚信、创新、绿色、协同
        </p>
        <p class="bannerT1" style="left: 6.58rem; top: 4.06rem">
          
        </p>
      </div>
      <div class="swiper-slide">
        <img src="/profile/upload/2025/10/31/6a4fae5af8115da38de1bbf0073cba58_20251031101349A002.jpg" alt="" />
        <p class="bannerT1" style="left: 5.18rem; top: 3.1rem">
          极致求实、争创一流、合作共赢、科技报国
        </p>
        <p class="bannerT1" style="left: 6.58rem; top: 4.06rem">
          成为高温非金属材料行业领先企业
        </p>
      </div>
      <div class="swiper-slide">
        <img src="/profile/upload/2025/10/28/5ea43291968bea7751d2fb8c54837a4b_20251028180842A067.jpg" alt="" />
        <p class="bannerT1" style="left: 5.18rem; top: 3.1rem">
          聚焦科技创新与价值创造，引领高温非金属材料业技术进步和绿色低碳发展
        </p>
        <p class="bannerT1" style="left: 6.58rem; top: 4.06rem">
          
        </p>
      </div>
    </div>

    <div class="bannerNum">
      <div class="numPart active">
        <span>01</span>
        <div class="numLine">
          <div class="numLineC"></div>
        </div>
      </div>
      <div class="numPart active">
        <span>02</span>
        <div class="numLine">
          <div class="numLineC"></div>
        </div>
      </div>
      <div class="numPart active">
        <span>03</span>
        <div class="numLine">
          <div class="numLineC"></div>
        </div>
      </div>
<!--      <div class="numPart">-->
<!--        <span>02</span>-->
<!--        <div class="numLine">-->
<!--          <div class="numLineC"></div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="numPart">-->
<!--        <span>03</span>-->
<!--        <div class="numLine">-->
<!--          <div class="numLineC"></div>-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <div class="bannerArr">
      <img src="/zgln/images/home/bannerarr.png" alt="" />
      <img src="/zgln/images/home/bannerarr.png" alt="" />
    </div>
  </div>


  <div class="homeMain">
    <!-- 企业视频 -->
    <div class="wrap">
      <div class="bg1"></div>
      <div class="content">
        <div class="title" data-aos="fade-right">
          <img src="/zgln/images/titleicon.png" alt="" class="titleIcon" />
          <div class="titleTxt">
            <p class="titleT1">企业视频</p>
            <p class="titleT2">CORPORATE VIDEO</p>
          </div>
        </div>
        <div class="homePart1">
          <div class="videoBox"  data-aos="zoom-in-right"  data-aos-delay="300">
            <div class="swiperVideo">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="videoWrap">
                    <video loop="" poster="" class="myVideo" controls="">
                      <source src="/profile/upload/2025/07/23/钢洛耐宣传片_20250723090053A009.mp4" type="video/mp4" />
                    </video>
                    <div class="videoPoster">
                      <img src="/profile/upload/2025/07/23/矩形 22738_看图王_20250723090047A008.jpg" alt="" />
                      <img src="/zgln/images/home/playerbtn.png" alt="" class="playerbtn" />
                    </div>
                  </div>
                  <p class="videoTitle line1">
                    中钢洛耐科技股份有限公司 企业宣传片
                  </p>
                  <p class="videoTime">2025-07-10</p>
                </div>
                <div class="swiper-slide">
                  <div class="videoWrap">
                    <video loop="" poster="" class="myVideo" controls="">
                      <source src="/profile/upload/2025/07/23/中钢洛耐_国之器 火之赋__20250723090705A015.mp4" type="video/mp4" />
                    </video>
                    <div class="videoPoster">
                      <img src="/profile/upload/2025/07/23/475f1955186dff017387dbe013fc67e4_20250723090644A014.jpg" alt="" />
                      <img src="/zgln/images/home/playerbtn.png" alt="" class="playerbtn" />
                    </div>
                  </div>
                  <p class="videoTitle line1">
                    中钢洛耐(国之器_火之赋)
                  </p>
                  <p class="videoTime">2025-05-20</p>
                </div>
                <div class="swiper-slide">
                  <div class="videoWrap">
                    <video loop="" poster="" class="myVideo" controls="">
                      <source src="/profile/upload/2025/07/23/不忘初心_20250723090338A013.mp4" type="video/mp4" />
                    </video>
                    <div class="videoPoster">
                      <img src="/profile/upload/2025/07/23/b6e3d9331c2bb6fd8fd633f0862f3732_20250723090323A012.jpg" alt="" />
                      <img src="/zgln/images/home/playerbtn.png" alt="" class="playerbtn" />
                    </div>
                  </div>
                  <p class="videoTitle line1">
                    不忘初心 继续前进
                  </p>
                  <p class="videoTime">2025-05-20</p>
                </div>
                <div class="swiper-slide">
                  <div class="videoWrap">
                    <video loop="" poster="" class="myVideo" controls="">
                      <source src="/profile/upload/2025/07/23/信物百年_20250723090206A010.mp4" type="video/mp4" />
                    </video>
                    <div class="videoPoster">
                      <img src="/profile/upload/2025/07/23/2176cb3d7cb84a8a2988594c2d1d3d07_20250723090216A011.jpg" alt="" />
                      <img src="/zgln/images/home/playerbtn.png" alt="" class="playerbtn" />
                    </div>
                  </div>
                  <p class="videoTitle line1">
                    信物百年 中国第一块国产化焦炉硅砖
                  </p>
                  <p class="videoTime">2025-05-20</p>
                </div>
              </div>
            </div>
            <div class="videoBtn">
              <div class="videoBtnC videoPrev">
                <img src="/zgln/images/home/arr1.png" alt="" />
              </div>
              <div class="videoBtnC videoNext">
                <img src="/zgln/images/home/arr1.png" alt="" />
              </div>
            </div>
          </div>
          <div class="homePart1Right"  data-aos="zoom-in-left" data-aos-delay="300">
            <div class="swiperVideoList" thumbsSlider="">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="/profile/upload/2025/07/23/矩形 22738_看图王_20250723090047A008.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="/profile/upload/2025/07/23/475f1955186dff017387dbe013fc67e4_20250723090644A014.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="/profile/upload/2025/07/23/b6e3d9331c2bb6fd8fd633f0862f3732_20250723090323A012.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="/profile/upload/2025/07/23/2176cb3d7cb84a8a2988594c2d1d3d07_20250723090216A011.jpg" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新闻中心 -->

    <div class="wrap">
      <div class="bg2"></div>
      <div class="content">
        <div class="homePart2Box">
          <div class="title"  data-aos="fade-right">
            <img src="/zgln/images/titleicon.png" alt="" class="titleIcon" />
            <div class="titleTxt">
              <p class="titleT1">新闻中心</p>
              <p class="titleT2">NEWS CENTER</p>
            </div>

            <div class="vMore position"  data-aos="fade-left">
              <a href="/website/news/news?banner=6&navbar=58">
                了解更多
                <img src="/zgln/images/home/arr3.png" alt="" />
                <img src="/zgln/images/home/arr1.png" alt="" />
              </a>
            </div>
          </div>

          <ul class="homePart2List">
            <li data-aos="fade-up"  data-aos-delay="300">
              <a href="/website/news/detail/845?banner=6&amp;navbar=58">
                <div class="scale-box">
                  <img src="/profile/upload/2026/03/09/微信图片_20260309100604_790_111_20260309173818A004.jpg" alt="" class="scale-img" />
                </div>
                <div class="homePart2Bottom">
                  <p class="homePart2T1 line2">
                    中钢洛耐开展“三八”国际劳动妇女节系列活动
                  </p>
                  <p class="homePart2T2">企业要闻</p>
                  <p class="homePart2T2">2026-03-09</p>

                  <div class="homePart2Btn">
                    <img src="/zgln/images/home/arr2.png" alt="" />
                    <img src="/zgln/images/home/arr1h.png" alt="" />
                  </div>
                  <div class="homePart2Line"></div>
                </div>
              </a>
            </li>
            <li data-aos="fade-up"  data-aos-delay="300">
              <a href="/website/news/detail/844?banner=6&amp;navbar=58">
                <div class="scale-box">
                  <img src="/profile/upload/2026/03/09/微信图片_20260309100607_792_111_20260309172557A001.jpg" alt="" class="scale-img" />
                </div>
                <div class="homePart2Bottom">
                  <p class="homePart2T1 line2">
                    中钢洛耐承建的苏州珂玛燃气高温陶瓷梭式窑成功点火
                  </p>
                  <p class="homePart2T2">企业要闻</p>
                  <p class="homePart2T2">2026-03-02</p>

                  <div class="homePart2Btn">
                    <img src="/zgln/images/home/arr2.png" alt="" />
                    <img src="/zgln/images/home/arr1h.png" alt="" />
                  </div>
                  <div class="homePart2Line"></div>
                </div>
              </a>
            </li>
            <li data-aos="fade-up"  data-aos-delay="300">
              <a href="/website/news/detail/843?banner=6&amp;navbar=58">
                <div class="scale-box">
                  <img src="/profile/upload/2026/02/12/u2mh76gd_20260212155032A017.png" alt="" class="scale-img" />
                </div>
                <div class="homePart2Bottom">
                  <p class="homePart2T1 line2">
                    中钢洛耐工会开展“过小年 迎新春 包饺子 话未来”主题活动
                  </p>
                  <p class="homePart2T2">企业要闻</p>
                  <p class="homePart2T2">2026-02-11</p>

                  <div class="homePart2Btn">
                    <img src="/zgln/images/home/arr2.png" alt="" />
                    <img src="/zgln/images/home/arr1h.png" alt="" />
                  </div>
                  <div class="homePart2Line"></div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 社会责任 -->

    <div class="wrap part3">
      <div class="homePart3Box" data-aos="fade-left">
        <ul class="homePart3List" data-aos="fade-up" data-aos-delay="300">
          <li onclick="window.open(&#39;/website/info/content/download/38&#39;)">
            <a href="/profile/upload/2025/07/26/24年102e207ec3a2a2c20756ec4f08fab99e6810206971a8a_20250726094549A237.pdf" download>
              <p class="homePart3Time">2025-04-29</p>
              <p class="homePart3Bk">社会责任</p>
              <p class="homePart3News line1">
                中钢洛耐2024年度环境、社会及治理（ESG）报告
              </p>
            </a>
          </li>
          <li onclick="window.open(&#39;/website/info/content/download/39&#39;)">
            <a href="/profile/upload/2025/07/26/中钢洛耐2023年度环境、社会及治理（ESG）报告_20250726094433A236.pdf" download>
              <p class="homePart3Time">2024-07-17</p>
              <p class="homePart3Bk">社会责任</p>
              <p class="homePart3News line1">
                中钢洛耐2023年度环境、社会及治理（ESG）报告
              </p>
            </a>
          </li>
          <li onclick="window.open(&#39;/website/info/content/download/40&#39;)">
            <a href="/profile/upload/2025/07/26/中钢洛耐2022年度环境、社会及治理（ESG）报告_20250726094357A235.pdf" download>
              <p class="homePart3Time">2024-07-17</p>
              <p class="homePart3Bk">社会责任</p>
              <p class="homePart3News line1">
                中钢洛耐2022年度环境、社会及治理（ESG）报告
              </p>
            </a>
          </li>
          <li onclick="window.open(&#39;/website/info/content/download/41&#39;)">
            <a href="" download>
              <p class="homePart3Time">2021-11-24</p>
              <p class="homePart3Bk">社会责任</p>
              <p class="homePart3News line1">
                中钢洛耐科技股份有限公司2020年社会责任报告
              </p>
            </a>
          </li>

        </ul>

        <div class="homePart3Right">
          <div class="title" data-aos="zoom-in-down" data-aos-delay="300">
            <img src="/zgln/images/titleicon.png" alt="" class="titleIcon" />
            <div class="titleTxt">
              <p class="titleT1">社会责任</p>
              <p class="titleT2">SOCIAL RESPONSIBILITY</p>
            </div>
          </div>
          <div class="vMore white" data-aos="zoom-in-up" data-aos-delay="300">
            <a href="/website/info/responsibility?banner=9&navbar=115&type=23">
              了解更多
              <img src="/zgln/images/home/arr3.png" alt="" />
              <img src="/zgln/images/home/arr1.png" alt="" />
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 党建活动 -->
    <div class="wrap part4">
      <div class="bg3"></div>
      <div class="bg4" data-aos="fade-right"></div>
      <div class="homePart4Box">
        <div class="title" data-aos="fade-right">
          <img src="/zgln/images/titleicon.png" alt="" class="titleIcon" />
          <div class="titleTxt">
            <p class="titleT1">党建活动</p>
            <p class="titleT2">INFORMATION DISCLOSURE</p>
          </div>

          <div class="vMore position" data-aos="fade-left">
            <a href="/website/partyBuild/activity?banner=4&navbar=61">
              了解更多
              <img src="/zgln/images/home/arr3.png" alt="" />
              <img src="/zgln/images/home/arr1.png" alt="" />
            </a>
          </div>
        </div>
        <div class="homePart4List">
          <div class="homePart4Content"  data-aos="fade-right" data-aos-delay="300">
            <a href="/website/partyBuild/detail/828?banner=4&amp;navbar=61">
              <div class="homePart4Img">
                <img src="/profile/upload/2025/12/05/张智勇1_20251205095203A009.png" alt="" />
              </div>
              <div class="homePart4Tip">党建活动</div>
              <p class="homePart4T1 line2">
                中钢集团党委副书记张智勇到中钢洛耐调研指导工作并参加基层联系点主题党日活动
              </p>
              <p class="homePart4Time">2025-11-07</p>
            </a>
          </div>

          <div class="homePart4Center" data-aos="zoom-in-up" data-aos-delay="300">
            <div class="homePart4Content">
              <a href="/website/partyBuild/detail/827?banner=4&amp;navbar=61">
                <div class="homePart4Img">
                  <img src="/profile/upload/2025/12/08/759d0890c65fe807d40146c3c78e06f7_20251208120113A001.png" alt="" />
                </div>
                <div class="homePart4Tip">党建活动</div>
                <p class="homePart4T1 line2">
                  党的二十届四中全会公报一图速览
                </p>
                <p class="homePart4Time">2025-11-06</p>
              </a>
            </div>
            <div class="homePart4Content mt">
              <a href="/website/partyBuild/detail/257?banner=4&amp;navbar=61">
                <div class="homePart4Img">
                  <img src="/profile/upload/2025/07/26/1c44ae8d68367842956cf_20250726100203A240.jpg" alt="" />
                </div>
                <div class="homePart4Tip">党建活动</div>
                <p class="homePart4T1 line2">
                  中钢洛耐武汉耐材开展深入贯彻中央八项规定精神学习教育主题实践活动
                </p>
                <p class="homePart4Time">2025-04-24</p>
              </a>
            </div>
          </div>

          <div class="homePart4Right"  data-aos="fade-left" data-aos-delay="300">
            <div class="homePart4Content">
              <a href="/website/partyBuild/detail/258?banner=4&amp;navbar=61">
                <div class="homePart4Img">
                  <img src="/profile/upload/2025/07/26/fca8c68366cc40270c_20250726100352A242.jpg" alt="" />
                </div>
                <div class="homePart4Tip">党建活动</div>
                <p class="homePart4T1 line2">
                  中钢洛耐党委召开深入贯彻中央八项规定精神学习教育动员部署会
                </p>
                <p class="homePart4Time">2025-04-03</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时股价 -->
    <div class="wrap part5">
      <div class="HomePart5Box" data-aos="fade-right">
        <div class="title">
          <img src="/zgln/images/titleicon.png" alt="" class="titleIcon" />
          <div class="titleTxt">
            <p class="titleT1">实时股价</p>
            <p class="titleT2">STOCK PRICE</p>
          </div>
        </div>

        <div class="homePart5Main">
          <div class="homePart5Top" data-aos="fade-up" data-aos-delay="300">
            <div>
              <p class="homePart5Name">中钢洛耐</p>
              <p class="homePart5Num">SH688119</p>
            </div>
            <div>
              <div class="flex-between">
                <div class="homePart5Rise">
                  <span>5.21</span>
                  <img src="/zgln/images/home/gpicon.png" alt="" />
                </div>
                <p class="homePart5Time">2026-04-21 13:27:13</p>
              </div>
              <div class="homePart5Line"></div>

              <div class="flex-between">
                <p class="homePart5RiseNum">涨幅： <span>-2.98%</span></p>
                <p class="homePart5DealNum">
                  成交量：<span>1000.6169万(手)</span>
                </p>
              </div>
            </div>
          </div>

          <table class="homePart5Table"  data-aos="fade-up" data-aos-delay="300">
            <tr>
              <th>最新股价</th>
              <th>最高价</th>
              <th>最低价</th>
              <th>(+/-)</th>
              <th>%</th>
              <th hidden>买入价</th>
              <th hidden>卖出价</th>
            </tr>
            <tr>
              <td>5.21</td>
              <td>5.39</td>
              <td>5.21</td>
              <td>-0.16</td>
              <td>-2.98</td>
              <td hidden>3.87</td>
              <td hidden>3.88</td>
            </tr>
          </table>

          <div class="homePart5Nav"  data-aos="fade-up" data-aos-delay="300">
            <ul>
              <li class="active">分时</li>
<!--              <li>5日</li>-->
              <li>日K</li>
              <li>周K</li>
              <li>月K</li>
<!--              <li>年K</li>-->
            </ul>

            <p>上证指数</p>
          </div>

          <div id="echarts"  data-aos="fade-up" data-aos-delay="300"></div>
        </div>
      </div>
    </div>

    <!-- 运营业绩 -->
    <div class="wrap part6" style="display: none">
      <div class="homePart6Box">
        <div class="homePart6Content">
          <div class="homePart6Cir" data-aos="zoom-in">
            <div class="homePart6Pointe"></div>
            <div class="homePart6Eearth">
              <img src="/zgln/images/home/img9.png" alt="" />
            </div>

            <div class="title" data-aos="fade-down" data-aos-delay="300">
              <img src="/zgln/images/titleicon.png" alt="" class="titleIcon" />
              <div class="titleTxt">
                <p class="titleT1">运营业绩</p>
              </div>
            </div>
            <p class="part6Title" data-aos="fade-down" data-aos-delay="300">OPERATIONAL PERFORMANCE</p>
          </div>

          <ul class="homePart6List" data-aos="fade-up" data-aos-delay="300">
            <li data-aos="fade-in"  data-aos-delay="700">
              <div class="homePart6Line"></div>
              <p class="homePart6T1">
                <span class="num">252</span> <span>万吨</span>
              </p>
              <p class="homePart6T2">2023年钢产量</p>
            </li>
            <li data-aos="fade-in"  data-aos-delay="700">
              <div class="homePart6Line"></div>
              <p class="homePart6T1">
                <span class="num">11129.72</span> <span>亿元</span>
              </p>
              <p class="homePart6T2">2023年营业收入(亿元)</p>
            </li>
            <li data-aos="fade-in"  data-aos-delay="700">
              <div class="homePart6Line"></div>
              <p class="homePart6T1">
                <span class="num">316.2</span> <span>亿元</span>
              </p>
              <p class="homePart6T2">2023年利润总额(亿元)</p>
            </li>
            <li data-aos="fade-in"  data-aos-delay="700">
              <div class="homePart6Line"></div>
              <p class="homePart6T1">
                <span class="num">1850</span> <span>人</span>
              </p>
              <p class="homePart6T2">2023年公司员工</p>
            </li>
            <li data-aos="fade-in"  data-aos-delay="700">
              <div class="homePart6Line"></div>
              <p class="homePart6T1">
                <span class="num">564</span> <span>(千克标准煤/吨)</span>
              </p>
              <p class="homePart6T2">2023年吨钢综合能耗</p>
            </li>
            <li data-aos="fade-in"  data-aos-delay="700">
              <div class="homePart6Line"></div>
              <p class="homePart6T1">
                <span class="num">4395</span> <span>项</span>
              </p>
              <p class="homePart6T2">2023年研发专利</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="wrap part7">
      <div class="homePart7Left" data-aos="fade-right">
        <p class="homePart7Title">中钢集团洛阳耐火材料研究院有限公司</p>
        <p class="homePart7Dec">CONTACT US</p>
        <div class="homePart7xx">
          <div class="homePart7List">
            <img src="/zgln/images/home/icon1.png" alt="" />
            <div>
              <p>联系电话</p>
              <p><a href="tel:0379-64208872">0379-64208872</a></p>
            </div>
          </div>
          <div class="homePart7List">
            <img src="/zgln/images/home/icon2.png" alt="" />
            <div>
              <p>企业邮箱</p>
              <p><a href="mailto:zgln.@zgln.com">zgln.@zgln.com</a></p>
            </div>
          </div>
          <div class="homePart7List">
            <img src="/zgln/images/home/icon3.png" alt="" />
            <div>
              <p>公司地址</p>
              <p>河南省洛阳市涧西区西苑路一号</p>
            </div>
          </div>
          <div class="homePart7Code">
            <img src="/profile/upload/2025/11/07/code1_20251107173929A001.jpg" alt="" />
            <img src="/profile/upload/2025/11/07/code2_20251107173935A002.jpg" alt="" />
          </div>
        </div>
      </div>

      <div class="mapBox" data-aos="fade-left"  style="background-image: url(/zgln/images/mapcn.jpg)">
        <div style="width:100%;height:100%;" id="map"></div>
      </div>

      <div class="part7Swiper" style="display: none;" data-aos="zoom-in-left" data-aos-delay="300">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <p class="part7SwiperTitle">国际贸易室</p>
            <div class="part7SwiperLine"></div>
            
          </div>
          <div class="swiper-slide">
            <p class="part7SwiperTitle">钢铁业务室</p>
            <div class="part7SwiperLine"></div>
            
          </div>
          <div class="swiper-slide">
            <p class="part7SwiperTitle">建材焦化室</p>
            <div class="part7SwiperLine"></div>
            
          </div>
          <div class="swiper-slide">
            <p class="part7SwiperTitle">有色业务室</p>
            <div class="part7SwiperLine"></div>
            
          </div>
          <div class="swiper-slide">
            <p class="part7SwiperTitle">化工业务室</p>
            <div class="part7SwiperLine"></div>
            
          </div>
          <div class="swiper-slide">
            <p class="part7SwiperTitle">新材料业务室</p>
            <div class="part7SwiperLine"></div>
            
          </div>
          <div class="swiper-slide">
            <p class="part7SwiperTitle">国家耐火材料质量检验检测中心</p>
            <div class="part7SwiperLine"></div>
            
          </div>
        </div>
      </div>

      <div class="backTop">
        <img src="/zgln/images/home/icon5.png" alt="" />
      </div>
    </div>
  </div>

  <!-- 底部 -->
  <footer>
<html lang="en">
  <head>
<!--    <script src="/js/jquery.min.js"></script>-->
    <!-- <script src="/js/fontSize.js"></script> -->
  </head>

  <body>
    <div class="footerWrap">
      <ul class="footerTop">
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/aboutus/leaderSpeech?banner=2&amp;navbar=57">关于我们</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/aboutus/leaderSpeech?banner=2&amp;navbar=57" class="footerItem">领导致辞</a><a href="/website/aboutus/companyProfile?banner=2&amp;navbar=57" class="footerItem">公司简介</a><a href="/website/aboutus/corporateCulture?banner=2&amp;navbar=57" class="footerItem">企业文化</a><a href="/website/aboutus/contactUs?banner=2&amp;navbar=57" class="footerItem">联系我们</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/info/basic?banner=9&amp;navbar=115">信息公开</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/info/basic?banner=9&amp;navbar=115" class="footerItem">企业基本信息</a><a href="/website/info/personnelChange?banner=9&amp;navbar=115" class="footerItem">重要人事变动</a><a href="/website/info/issues?banner=9&amp;navbar=115" class="footerItem">企业重大事项</a><a href="/website/info/responsibility?banner=9&amp;navbar=115" class="footerItem">履行社会责任</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/news/news?banner=6&amp;navbar=58">新闻中心</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/news/news?banner=6&amp;navbar=58" class="footerItem">企业要闻</a><a href="/website/news/video?banner=6&amp;navbar=58" class="footerItem">企业视频</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/partyBuild/activity?banner=4&amp;navbar=61">党建文化</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/partyBuild/activity?banner=4&amp;navbar=61" class="footerItem">党建活动</a><a href="/website/partyBuild/discipline?banner=4&amp;navbar=61" class="footerItem">党规党纪</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/technological/team?navbar=119&amp;banner=10">科技创新</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/technological/team?navbar=119&amp;banner=10" class="footerItem">创新团队</a><a href="/website/technological/platform?navbar=119&amp;banner=10" class="footerItem">创新平台</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=66">产品与服务</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=66" class="footerItem">钢铁行业用耐火材料</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=67" class="footerItem">有色行业用耐火材料</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=68" class="footerItem">化工行业用耐火材料</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=69" class="footerItem">建材行业用耐火材料</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=70" class="footerItem">其他行业用耐火材料</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=94" class="footerItem">高温检测仪器</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=119" class="footerItem">齿科设备</a><a href="/website/product?banner=3&amp;navbar=59&amp;productChannelId=72" class="footerItem">工程设计及施工总承包</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/national/introduce?banner=14&amp;navbar=146">国检中心</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/national/introduce?banner=14&amp;navbar=146" class="footerItem">中心介绍</a><a href="/website/national/process?banner=14&amp;navbar=146" class="footerItem">业务流程及联系方式</a><a href="/website/national/detect?banner=14&amp;navbar=146" class="footerItem">检测技术</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/laboratory/introduce?banner=13&amp;navbar=145">先进耐火材料全国重点实验室</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/laboratory/introduce?banner=13&amp;navbar=145" class="footerItem">重点实验室概况</a><a href="/website/laboratory/dynamic?banner=13&amp;navbar=145" class="footerItem">重点实验室动态</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/purchase/notice?banner=8&amp;navbar=141">招标采购</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/purchase/notice?banner=8&amp;navbar=141" class="footerItem">招标公告</a><a href="/website/purchase/instruction?banner=8&amp;navbar=141" class="footerItem">招标须知</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/human/recruit?banner=7&amp;navbar=62">人力资源</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/human/recruit?banner=7&amp;navbar=62" class="footerItem">招聘信息</a><a href="/website/human/benefit?banner=7&amp;navbar=62" class="footerItem">薪酬福利</a><a href="/website/human/study?banner=7&amp;navbar=62" class="footerItem">学习发展</a>
        </li>
        <li>
          <!--          一级-->
          <p class="footerTitle"><a href="/website/investor/notice?banner=5&amp;navbar=107">投资者关系</a></p>
          <div class="footerLine"></div>
          <!--          二级-->
          <a href="/website/investor/notice?banner=5&amp;navbar=107" class="footerItem">公司公告</a><a href="/website/investor/stock?banner=5&amp;navbar=107" class="footerItem">股票信息</a><a href="/website/investor/hotline?banner=5&amp;navbar=107" class="footerItem">投资者热线</a><a href="/website/investor/protect?banner=5&amp;navbar=107" class="footerItem">投资者保护</a>
        </li>

      </ul>

      <div class="footerLine2"></div>

      <div class="footerBottom">
        <a href=""
        >Copyright © 中钢集团洛阳耐火材料研究院有限公司 All Rights Reserved
          豫ICP备18088999号
        </a>
        <a href="">
          <img src="/zgln/images/hui.png" alt="" /> 公安备案号 18866999号</a
        >
      </div>
    </div>
  </body>
</html>
</footer>

  <script type="text/javascript">

  </script>

  <script>
    $(function () {

      AOS.init()
      // 首页banner
      let timer = null;
      var bannerSwiper = new Swiper(".bannerSwiper", {
        loop: true,
        on: {
          slideChangeTransitionEnd: function (swiper) {
            getSwiperAuto(swiper.realIndex);
          },
        },
      });

      // 轮播
      getSwiperAuto(0);
      function getSwiperAuto(i) {
        clearTimeout(timer);
        const numPart = $(".numPart");
        const numLineC = $(".numLineC");
        numPart.removeClass("active").eq(i).addClass("active");

        numLineC.removeClass("wid");
        for (var s = 0; s < getPrevNumbers(i).length; s++) {
          numLineC.eq(s).addClass("wid");
        }

        timer = setTimeout(function () {
          bannerSwiper.slideNext(500);
        }, 3000);
      }

      // 获取小于当前元素的索引
      function getPrevNumbers(num) {
        let result = [];
        for (let i = 0; i < num; i++) {
          result.push(i);
        }
        return result;
      }





      // 企业视频swiper
      const videoPoster = $('.videoPoster');
      const video = $('.swiperVideo').find('video')
      videoPoster.each(function (index) {
        $(this).click(function () {
          $(this).hide();
          $(this).parent().find('video').get(0).play();
        })
      })

      var swiperVideoList = new Swiper(".swiperVideoList", {
        direction: "vertical",
        // loop: true,
        slidesPerView: 3,
        spaceBetween: "10%",
        watchSlidesVisibility: true,

      });

      var swiperVideo = new Swiper(".swiperVideo", {
        // loop: true,
        thumbs: {
          swiper: swiperVideoList,
        },
        navigation: {
          nextEl: ".videoNext",
          prevEl: ".videoPrev",
        },
        on: {
          slideChangeTransitionEnd: function () {
            video.each(function () {
              $(this).get(0).pause();
            })
          },
        }
      });


      const part7Slide = $('.part7Swiper').find('.swiper-slide');
      // 部门swiper
      var part7Swiper = new Swiper(".part7Swiper", {
        initialSlide: 0,
        // loop: true,
        slidesPerView: 3,
        spaceBetween: "5%",
        on: {
          touchStart: function (swiper, event) {
            $('.part7Swiper').css('cursor', 'url(/zgln/images/home/handmove.png), auto');
          },
          touchMove: function (swiper, event) {
            $('.part7Swiper').css('cursor', 'url(/zgln/images/home/handmove.png), auto');
          },
          touchEnd: function (swiper, event) {
            $('.part7Swiper').css('cursor', 'url(/zgln/images/home/hand.png), auto');
          },
        },
      });

      //点击返回顶部

      $(".backTop").click(function () {
        $(window).scrollTop(0);
      });

      //鼠标移入swiper改变样式

      $('.part7Swiper').mouseenter(function () {
        $(this).css('cursor', 'url(/zgln/images/home/hand.png), auto');
      })


    });
  </script>
  <script>
    $(function () {

      const chartDom = document.getElementById("echarts");
      const myChart = echarts.init(chartDom);
      const type = ['line', 'day', 'week', 'month'];
      // tab切换
      const homePart5NavTab = $(".homePart5Nav").find("li");

      homePart5NavTab.each(function (i) {
        $(this).click(function () {
          homePart5NavTab.removeClass("active").eq(i).addClass("active");
          getData(type[i])
        });
      });
      getData(type[0])
      // 调用接口
      function getData(type) {
        $.ajax({
          url: `/website/investor/info/stock?type=${type}`,
          type: 'GET',
          dataType: 'json',
          success: function (data) {
            console.log(data);
            //判断类型
            if (type === 'line') {

              renderMinuteChart(data.data.line)
            } else {
              renderKChart(data.data.kline, type)
            }

          },
          error: function (data) {
            console.log(data)
          }
        });

      }

      // 处理分时图数据
      function processMinuteData(data) {
        const times = [];
        const prices = [];
        const avgPrices = [];
        const volumes = [];

        // 上午时段 (09:30 - 11:30)
        for (let i = 0; i < 121; i++) {
          // 确保数据存在
          if (i < data.length) {
            const minutes = 30 + i;
            const hours = 9 + Math.floor(minutes / 60);
            const mins = minutes % 60;
            times.push(`${hours}:${mins.toString().padStart(2, '0')}`);
            prices.push(data[i][0]);
            avgPrices.push(data[i][1]);
            volumes.push(data[i][2]);
          }
        }

        // 下午时段 (13:00 - 15:00)
        for (let i = 0; i < 120; i++) {
          const dataIndex = 121 + i;
          // 确保数据存在
          if (dataIndex < data.length) {
            const hours = 13 + Math.floor(i / 60);
            const mins = i % 60;
            times.push(`${hours}:${mins.toString().padStart(2, '0')}`);
            prices.push(data[dataIndex][0]);
            avgPrices.push(data[dataIndex][1]);
            volumes.push(data[dataIndex][2]);
          }
        }

        return { times, prices, avgPrices, volumes };
      }

      function formatDate(dateNum) {
        const dateStr = dateNum.toString();
        const year = dateStr.substring(0, 4);
        const month = dateStr.substring(4, 6);
        const day = dateStr.substring(6, 8);
        return `${year}-${month}-${day}`;
      }

      // 处理K线数据
      function processKData(data) {
        const dates = [];
        const candleData = [];
        const volData = [];

        data.forEach(item => {
          dates.push(formatDate(item[0]));
          candleData.push([item[1], item[4], item[3], item[2]]);
          volData.push(item[5]);
        });

        return { dates, candleData, volData };
      }

      // 分时图
      function renderMinuteChart(dataLine) {
        const { times, prices, avgPrices, volumes } = processMinuteData(dataLine);

        const option = {
          backgroundColor: 'transparent',
          animation: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'rgba(15, 52, 96, 0.9)',
                color: '#e6e6e6'
              }
            },
            backgroundColor: 'rgba(15, 52, 96, 0.9)',
            borderColor: '#0f3460',
            textStyle: { color: '#e6e6e6' },

          },
          grid: [
            {
              left: '6%',
              right: '2.7%',
              top: '10%',
              height: '80%'
            },
            {
              left: '6.1%',
              right: '2.7%',
              top: '59.8%',
              height: '30%'
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: times,
              boundaryGap: true,
              axisLine: { lineStyle: { color: '#fff' } },
              axisLabel: {
                color: '#fff',
                interval: 59, // 一个小时显示一个标签
                formatter: function (value, index) {
                  const keyTimes = ['09:30', '10:30', '11:30', '13:00', '14:00', '15:00'];
                  const keyIndexes = [0, 60, 120, 121, 180, 240];
                  if (keyIndexes.includes(index)) {
                    return keyTimes[keyIndexes.indexOf(index)];
                  }
                  return '';
                }
              },
            },
            {
              boundaryGap: true,
              type: 'category',
              gridIndex: 1,
              data: times,
              boundaryGap: false,
              axisLine: { show: false },
              axisTick: { show: false },
              axisLabel: { show: false }
            }
          ],
          yAxis: [
            {
              scale: true,
              boundaryGap: ['10%', '10%'],
              splitArea: {
                show: true,
                areaStyle: {
                  color: ['rgba(15,52,96,0)', 'rgba(15,52,96,0)']
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff'
                },
                show: true,
              },
              axisLabel: {
                color: '#fff',
                show: true,
                formatter: '{value}'
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.5)',
                  type: 'dashed',
                }
              }
            },
            {
              scale: true,
              gridIndex: 1,
              axisLabel: { show: false },
              axisLine: { show: false },
              axisTick: { show: false },
              splitLine: { show: false }
            }
          ],
          series: [
            {
              name: '成交价',
              type: 'line',
              data: prices,
              smooth: true,
              symbol: 'none',
              lineStyle: {
                color: 'rgba(235, 37, 37, 1)',
                width: 2
              },
            },
            {
              name: '均价',
              type: 'line',
              data: avgPrices,
              smooth: true,
              symbol: 'none',
              lineStyle: {
                color: '#f56c6c',
                width: 1,
                type: 'dashed'
              }
            },
            {
              name: '成交量',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: volumes,
              itemStyle: {
                // color: '#f56c6c'
                color: function (params) {
                  if (params.dataIndex === 0) {
                    return '#e32d3c';
                  }
                  return prices[params.dataIndex] >= prices[params.dataIndex-1] ? '#e32d3c' : '#0d9871';
                },
              }
            }
          ]
        };

        myChart.setOption(option, true);
      }

      //k线图

      function renderKChart(data, type) {
        const { dates, candleData, volData } = processKData(data);

        const option = {
          backgroundColor: 'transparent',
          animation: true,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: 'rgba(15, 52, 96, 0.9)',
                color: '#e6e6e6'
              }
            },
            backgroundColor: 'rgba(15, 52, 96, 0.9)',
            borderColor: '#0f3460',
            textStyle: { color: '#e6e6e6' },
            formatter: function (params) {
              const klineData = params[0];
              const volData = params[1];
              const date = klineData.name;
              const values = klineData.value;

              const formatNumber = num => num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

              return `
                <div style="font-weight:bold;margin-bottom:8px;border-bottom:1px solid #2c3e50;padding-bottom:5px">
                   ${date}
                </div>
                <div style="display:flex;align-items:center;margin:5px 0">
                  <span style="display:inline-block;width:8px;height:8px;background:#1155a8;border-radius:50%;margin-right:8px"></span>
                  开盘: <b style="margin-left:5px">${formatNumber(values[1])}</b>
                </div>
                <div style="display:flex;align-items:center;margin:5px 0">
                  <span style="display:inline-block;width:8px;height:8px;background:#1155a8;border-radius:50%;margin-right:8px"></span>
                  收盘: <b style="margin-left:5px;color:#fff">${formatNumber(values[2])}</b>
                </div>
                <div style="display:flex;align-items:center;margin:5px 0">
                  <span style="display:inline-block;width:8px;height:8px;background:#1155a8;border-radius:50%;margin-right:8px"></span>
                  最低: <b style="margin-left:5px">${formatNumber(values[3])}</b>
                </div>
                <div style="display:flex;align-items:center;margin:5px 0">
                  <span style="display:inline-block;width:8px;height:8px;background:#1155a8;border-radius:50%;margin-right:8px"></span>
                  最高: <b style="margin-left:5px">${formatNumber(values[4])}</b>
                </div>
                <div style="display:${volData ? 'flex' : 'none'};align-items:center;margin:5px 0">
                  <span style="display:inline-block;width:8px;height:8px;background:#1155a8;border-radius:50%;margin-right:8px"></span>
                  成交量: <b style="margin-left:5px">${volData ? volData.value.toLocaleString(): ''}</b>
                </div>
              `;
            }
          },
          grid: [
            {
              left: '6%',
              right: '2.7%',
              top: '10%',
              height: '80%'
            },
            {
              left: '6%',
              right: '2.7%',
              top: '59.8%',
              height: '30%'
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: dates,
              scale: true,
              axisLine: { onZero: false, lineStyle: { color: '#fff' } },
              splitLine: { show: false },
              splitNumber: 20,
              boundaryGap: true,
              axisLabel: {

                color: '#fff',
                formatter: function (value) {
                  if (type === 'month') {
                    return value.substring(0, 7); // 显示年月
                  }
                  return value;
                }
              }
            },
            {
              type: 'category',
              gridIndex: 1,
              data: dates,
              scale: true,
              boundaryGap: true,
              axisLine: { onZero: false, show: false },
              axisTick: { show: false },
              axisLabel: { show: false },
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              scale: true,

              splitArea: {
                show: false,
              },
              axisLabel: {
                color: '#fff',
                formatter: '{value}'
              },
              axisLine: {
                lineStyle: {
                  color: '#fff'
                },
                show: true,
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.5)',
                  type: 'dashed',
                }
              }
            },
            {
              scale: true,
              gridIndex: 1,
              splitNumber: 2,
              axisLabel: { show: false },
              axisLine: { show: false },
              axisTick: { show: false },
              splitLine: { show: false }
            }
          ],
          series: [
            {
              name: 'K线',
              type: 'candlestick',
              data: candleData,
              itemStyle: {
                color: '#e32d3c',
                color0: '#0d9871',
                borderColor: '#e32d3c',
                borderColor0: '#0d9871'
              },

            },
            {
              name: '成交量',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: volData,
              boundaryGap: true,
              itemStyle: {
                color: function (params) {
                  const candle = candleData[params.dataIndex];
                  return candle[1] >= candle[0] ? '#e32d3c' : '#0d9871';
                  // return '#ffffff';
                },
                opacity: 0.9
              },
              emphasis: {
                itemStyle: {
                  opacity: 1
                }
              }
            }
          ]
        };

        myChart.setOption(option, true);
      }

    })



  </script>
</body>

</html>
